<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../tf-event-dashboard/tf-event-dashboard.html">
<link rel="import" href="../tf-histogram-dashboard/tf-histogram-dashboard.html">
<link rel="import" href="../tf-image-dashboard/tf-image-dashboard.html">
<link rel="import" href="../tf-graph-dashboard/tf-graph-dashboard.html">
<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">
<!--
tf-tensorboard is the frontend entry point for TensorBoard.

It implements a toolbar (via paper-header-panel and paper-toolbar) that
allows the user to toggle between various dashboards.
-->
<dom-module id="tf-tensorboard">
  <template>
    <paper-header-panel>
      <paper-toolbar id="toolbar">
        <div id="toolbar-content">
          <div class="toolbar-title">TensorBoard</div>
          <paper-tabs selected="0" noink class="tabs" id="tabs">
            <paper-tab data-mode="events" on-click="changeMode">Events</paper-tab>
            <paper-tab data-mode="images" on-click="changeMode">Images</paper-tab>
            <paper-tab data-mode="graphs" on-click="changeMode">Graph</paper-tab>
            <paper-tab data-mode="histograms" on-click="changeMode">Histograms</paper-tab>
          </paper-tabs>
        </div>
      </paper-toolbar>
      <div id="content" class="fit">
        <template is="dom-if" if="[[eventDashboard(mode)]]">
          <tf-event-dashboard
            id="eventDash"
            router="[[router]]"
          ></tf-event-dashboard>
        </template>

        <template is="dom-if" if="[[imageDashboard(mode)]]">
          <tf-image-dashboard
            id="imageDash"
            router="[[router]]"
          ></tf-image-dashboard>
        </template>

        <template is="dom-if" if="[[graphDashboard(mode)]]">
          <tf-graph-dashboard
            id="graphDash"
            router="[[router]]"
          ></tf-graph-dashboard>
        </template>

        <template is="dom-if" if="[[histogramDashboard(mode)]]">
          <tf-histogram-dashboard
            id="histogramDash"
            router="[[router]]"
          ></tf-histogram-dashboard>
        </template>
      </div>
    </paper-header-panel>
    <style>
      :host {
        height: 100%;
        display: block;
        background-color: var(--paper-grey-100);
      }

      #toolbar {
        background-color: var(--tb-orange-strong);
        -webkit-font-smoothing: antialiased;
      }

      #toolbar-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .toolbar-title {
        font-size: 20px;
        margin-left: 10px;
        text-rendering: optimizeLegibility;
        letter-spacing: -0.025em;
        font-weight: 500;
      }

      #content {
        height: 100%;
      }

      .tabs {
        width: 400px;
        text-transform: uppercase;
        height: 100%;
      }

      paper-tabs {
        --paper-tabs-selection-bar-color: white;
      }

    </style>
  </template>
  <script>
    Polymer({
      is: "tf-tensorboard",
      properties: {
        router: {
          type: Object,
          value: TF.Urls.productionRouter(),
        },
        mode: {
          type: String,
          value: "events",
        },
      },
      changeMode: function(ev) {
        var mode = ev.target.parentElement.getAttribute('data-mode');
        this._changeMode(mode, true);
      },
      eventDashboard: function(mode) {
        return mode === "events";
      },
      imageDashboard: function(mode) {
        return mode === "images";
      },
      graphDashboard: function(mode) {
        return mode === "graphs";
      },
      histogramDashboard: function(mode) {
        return mode === "histograms";
      },
      loadPreviousMode: function() {
        this._changeMode(this._getMode(), false);
      },
      ready: function() {
        this._changeMode(this._getMode(), true);

        var self = this;
        window.addEventListener('hashchange', function(){
          self.loadPreviousMode();
        });
      },
      _changeMode: function(mode, isNewState) {
        this.mode = mode;

        // Change the selected tab
        this.$.tabs.selected = this._tabs().indexOf(mode);

        if (isNewState){
          window.location.hash = mode;
        }
      },
      _getMode: function() {
        // Return the mode as it is stored in the hash.
        // If no mode can be found, default to the first tab.
        var hash = window.location.hash;
        return hash.length > 0 ? hash.slice(1, hash.length) : this._tabs()[0];
      },
      _tabs: function() {
        var elts = Array.prototype.slice.call(this.querySelectorAll('paper-tab'));
        return elts.map(function(elt){ return elt.getAttribute('data-mode')});
      },
    });
  </script>
</dom-module>
